<template>
    <div class="accountSafe-wrapper">
        <IHeader class="header" back="true" title="账户安全"></IHeader>
        <div class="itemList" v-if="!loadingShow">
            <div class="itemCell item_height flex_row border-bottom-ebebeb" @click="jumpTo(1)">
                <text class="fs_28">修改手机号码</text>
                <div class="flex_row tel-wrapper">
                    <text class="telphone col_464646 fs_28">{{informationObj.phone.substring(0, 3)}}****{{informationObj.phone.substring(7, 11)}}</text>
                    <image class="arrow_right" :src="imgPath('arrow_right_small.png')"></image>
                </div>
            </div>
            <div class="itemCell item_height flex_row border-bottom-ebebeb" @click="jumpTo(2)">
                <text class="fs_28">修改登录密码</text>
                <image class="arrow_right" :src="imgPath('arrow_right_small.png')"></image>
            </div>
        </div>
        <!--loading-->
        <wxc-loading :show="loadingShow" :need-mask="needMask"></wxc-loading>
    </div>
</template>

<script>
import IHeader from '@/components/header'
import { WxcLoading } from 'weex-ui'
import { userInformation } from '@/api/user'
export default {
  name: 'accountSafe',
  data () {
    return {
      loadingShow: true,
      informationObj: {} // 用户信息
    }
  },
  mounted () {
    const that = this
    // that.loadingShow = true
    that.$api.get(userInformation, {}, (res) => {
      that.informationObj = res.data
      that.loadingShow = false
    }, () => {
      that.loadingShow = false
    }, true)
  },
  methods: {
    jumpTo (val) { // 跳转
      const that = this
      let path = ''
      if (val === 1) {
        path = '/account/rebindtelphone' // 重新绑定手机号
      } else if (val === 2) {
        path = '/account/modifyPassword' // 修改密码
      }
      that.$router.push({
        path: path,
        query: {tel: that.informationObj.phone}
      })
    }
  },
  components: {
    IHeader,
    WxcLoading
  }
}
</script>

<style scoped>
    .accountSafe-wrapper {
        background-color: #f5f5f5;
    }
    .fs_28 {
        font-size: 28px;
    }
    .col_464646 {
        color: #464646;
    }
    .flex_row {
        flex-direction: row;
    }
    .border-bottom-ebebeb {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #ebebeb;
    }
    .itemList {
        margin-top: 88px;
        background-color: #f5f5f5;
    }
    .itemCell {
        height: 100px;
        padding-left: 24px;
        padding-right: 24px;
        /*padding-top: 16px;*/
        /*padding-bottom: 16px;*/
        align-items: center;
        justify-content: space-between;
        background-color: #fff;
    }
    .arrow_right {
        width: 36px;
        height: 36px;
    }
    .telphone {
        margin-right: 16px;
    }
</style>
